<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>h5</title>
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/style.css">
	</head>

	<body class="index-bg">
		<div class="page">
			<div class="header">
				<div class="logo">斑马优惠</div>
				<div class="quit"><img src="images/quit-icon.png"></div>
				<div class="cls"></div>
				<div class="section">
					<div class="search">
						<a href="javascript:;" class="search-btn"><img src="images/search-icon.png"></a>
						<input type="text" value="" class="search-input" placeholder="请输入关键词">
					</div>
					<div class="part">
						<div class="qiandao"><img src="images/redbag-icon.png"> 签到</div>
						<div class="kefu"><img src="images/wx-icon.png"> 客服</div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="menu">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">女装</a></li>
						<li><a href="#">百货</a></li>
						<li><a href="#">美食</a></li>
						<li><a href="#">美妆</a></li>
						<li><a href="#">内衣</a></li>
						<li><a href="#">鞋包</a></li>
					</ul>
				</div>

				<div id="list" class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide">
				        	<div class="cate cate-list">
								<div class="cate-txt">
									<ul>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate1.png"></div>
												<div class="cate-h2">女装</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate2.png"></div>
												<div class="cate-h2">百货</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate3.png"></div>
												<div class="cate-h2">美食</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate4.png"></div>
												<div class="cate-h2">美妆</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate5.png"></div>
												<div class="cate-h2">鞋包</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate6.png"></div>
												<div class="cate-h2">内衣</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate7.png"></div>
												<div class="cate-h2">男装</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate8.png"></div>
												<div class="cate-h2">母婴</div>
											</div>
										</li>
										<div class="cls"></div>
									</ul>
								</div>
							</div>
				        </div>
				        <div class="swiper-slide">
				        	<div class="cate cate-list">
								<div class="cate-txt">
									<ul>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate1.png"></div>
												<div class="cate-h2">女装</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate2.png"></div>
												<div class="cate-h2">百货</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate3.png"></div>
												<div class="cate-h2">美食</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate4.png"></div>
												<div class="cate-h2">美妆</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate5.png"></div>
												<div class="cate-h2">鞋包</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate6.png"></div>
												<div class="cate-h2">内衣</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate7.png"></div>
												<div class="cate-h2">男装</div>
											</div>
										</li>
										<li>
											<div class="inner">
												<div class="cate-img"><img src="images/cate8.png"></div>
												<div class="cate-h2">母婴</div>
											</div>
										</li>
										<div class="cls"></div>
									</ul>
								</div>
							</div>
				        </div>
				    </div>
				    <!-- 如果需要分页器 -->
				    <div class="swiper-pagination"></div>
				</div>

				
				<div class="miaosha">
					
					<div class="quan">
						<div class="list-title">
							<ul>
								<li><a href="#">精选</a></li>
								<li><a href="#">大额券</a></li>
								<li><a href="#">最新</a></li>
								<li><a href="#">销量</a></li>
								<li><a href="#">价格</a></li>
							</ul>
						</div>
						<div class="quan-txt">
							<ul>
								<li>
									<div class="quan-inner">
										<div class="quan-txt-img"><img src="images/quan1.png"></div>
										<div class="quan-txt-title">
											<h4>宝宝启蒙认知教育</h4>
											<div class="quan-txt-title-l">
												<span class="quan-txt-be">售价¥22.15</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-af">券后¥2.15</span>
											</div>
											<div class="cls"></div>
											<div class="quan-txt-title-l">
												<span class="quan-txt-ka">20元券</span>
												<span class="quan-txt-nu">月销2000</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-sh">分享</span>
											</div>
											<div class="cls"></div>
										</div>
									</div>
								</li>

								<li>
									<div class="quan-inner">
										<div class="quan-txt-img"><img src="images/quan2.png"></div>
										<div class="quan-txt-title">
											<h4>宝宝启蒙认知教育</h4>
											<div class="quan-txt-title-l">
												<span class="quan-txt-be">售价¥22.15</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-af">券后¥2.15</span>
											</div>
											<div class="cls"></div>
											<div class="quan-txt-title-l">
												<span class="quan-txt-ka">20元券</span>
												<span class="quan-txt-nu">月销2000</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-sh">分享</span>
											</div>
											<div class="cls"></div>
										</div>
									</div>
								</li>

								<li>
									<div class="quan-inner">
										<div class="quan-txt-img"><img src="images/quan1.png"></div>
										<div class="quan-txt-title">
											<h4>宝宝启蒙认知教育</h4>
											<div class="quan-txt-title-l">
												<span class="quan-txt-be">售价¥22.15</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-af">券后¥2.15</span>
											</div>
											<div class="cls"></div>
											<div class="quan-txt-title-l">
												<span class="quan-txt-ka">20元券</span>
												<span class="quan-txt-nu">月销2000</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-sh">分享</span>
											</div>
											<div class="cls"></div>
										</div>
									</div>
								</li>

								<li>
									<div class="quan-inner">
										<div class="quan-txt-img"><img src="images/quan2.png"></div>
										<div class="quan-txt-title">
											<h4>宝宝启蒙认知教育</h4>
											<div class="quan-txt-title-l">
												<span class="quan-txt-be">售价¥22.15</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-af">券后¥2.15</span>
											</div>
											<div class="cls"></div>
											<div class="quan-txt-title-l">
												<span class="quan-txt-ka">20元券</span>
												<span class="quan-txt-nu">月销2000</span>
											</div>
											<div class="quan-txt-title-r">
												<span class="quan-txt-sh">分享</span>
											</div>
											<div class="cls"></div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	<script src="js/swiper.min.js"></script>
	<script>        
		  var mySwiper = new Swiper ('#list', {
		    autoplay: 5000,
        	visibilityFullFit: true,
        	loop: true,
	        pagination: {
	            el: '#list .swiper-pagination',
	        }

		  });
        
  </script>		
	</body>
</html>